<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="../style/css/base.css">
    <style>

    </style>
</head>

<body>
    <input type="text" id="roleName" autocomplete="off" list="roleNameList" placeholder="请输入角色名">
    <input type="hidden" name="roleId" />
</body>
<script>
    var PageJs = {
        dataList: []
    }
    PageJs.checkUserName = function(val){
        console.log(val)
    }

    PageJs.findAllUsers = function(){
        console.log('aaa')
    }

    PageJs.getRoleList = function(){
        // ajax
        this.dataList = [
            {label: '管理员', value: '1'},
            {label: '区域主管', value: '2'},
            {label: 'PM', value: '3'},
            {label: '项目经理', value: '4'},
            {label: '普通员工', value: '5'},
        ]
    }
    // "用户名"模糊匹配查询_jquery Ajax实现
    $(document).ready(function () {
        $('#roleName').keyup((e) => {
            console.log(e.key)
            $("#roleNameList option").remove();
            PageJs.getRoleList(e.key);

            $("#roleName").autocomplete({
                source : PageJs.dataList,  // 数据源
                delay: 0,  // 多久后显示, 单位ms
                width: 320,
                max: 5,  // 为什么不起作用?
                highlight: false,
                multiple: true,
                multipleSeparator: "",
                scroll: true,
                scrollHeight: 300,
                select: function(event, ui){
                    // 这里的this指向当前输入框的DOM元素
                    // event参数是事件对象
                    // ui对象只有一个item属性，对应数据源中被选中的对象
                    alert("123");
                    /*  $(this).value = ui.item.label; */
                    $("#roleName" ).val( ui.item.label );
                    $("input[name='roleId']").val(ui.item.value );
                    // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
                    event.preventDefault();     
                }
            });
        })
    })

</script>